<template>
  <main class="w-screen h-screen p-2 overflow-clip flex items-center justify-center" ref="container">
    <ul class="grid gap-2"
      :class="aspectBreak ? 'h-full w-fit grid-rows-4 grid-cols-3' : 'w-full grid-cols-3 grid-rows-4'">
      <li v-for="n in 12" :key="n" class="aspect-video rounded-lg bg-blue-200" v-text="n" :style="boxStyle" />
    </ul>
  </main>
</template>
<script setup lang="ts">
import { ref, computed, nextTick, StyleValue, CSSProperties } from "vue";
import { useElementSize } from '@vueuse/core'

const container = ref()
const { width, height } = useElementSize(container)

const aspect = computed(() => width.value / height.value)

const aspectBreak = computed(() => aspect.value > 48 / 36)

const boxStyle = computed(() => aspectBreak.value ? {
  width: CSS.px(height.value / 36 * 16 - 8)
} : {

})

</script>
